<template>
	<view class="collection" v-if="technicianList.length != 0">
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'我的收藏',color:'#fff'}" />
		<!-- #endif -->
		<!-- 技师列表 -->
		<view v-if="!notList" class="technician_list" :style="{'max-height':maxHeight+'px'}" :class="[{not_detail:!detailFlag,not_detail:!subscribeFlag}]">
			<view   class="technician_list-item" v-for="(item,index) in technicianList" :key="index">
				<view class="left">
					<image @click="preview(item.cover)" :src="item.cover" mode=""></image>
					<view class="type">可服务</view>
				</view>
				<view class="right">
					<view class="top">
						<view class="name">
							<view>{{item.name}}</view>
							<text  
								@click="preveImage(item.images)" 
								style="margin-left: 7px;background: #24D576;padding: 2px 5px;border-radius: 5px;color: #fff;font-size: 20rpx;"
							>
								更多照片
							</text>
						</view>
						<view class="work_time">
							可约：{{item.service_time}}
						</view>
					</view>
					<view class="main" @click="goDetail(item)">
						<view class="">
							<view class="score">
								<image src="/static/images/collect.png" mode=""></image>
								<text>{{item.score}}</text>
							</view>	
							<view class="served">已服务：{{item.sales}}单</view>
						</view>
						<view class="distance">
							<image src="/static/images/address.png" mode=""></image>
							<text>{{item.distance}}</text>
						</view>
					</view>
					<view class="footer">
						<view class="comment">
						<!-- 	<view class="">
								<image src="/static/images/technician/商家.png" mode=""></image>
								<text>商家</text>
							</view> -->
							<view class="">
								<image src="/static/images/comment.png" mode="" @click="getDetail(index)"></image>
								<text>{{item.comments}}</text>
								<!-- <text  title='111111' >1111111</text> -->
							</view>
							<view class="">
								<image @click="collection(item.id)" src="/static/images/collect.png" mode=""></image>
								<text> {{item.collects}}</text>
							</view>
						</view>
						<view class="appointment">
							
							<view class="convention" @click="subscribe(index)">立即预约</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="not_service">
			<view class="image">
				<image src="/static/images/technician/not_sevice.png" mode=""></image>
			</view>
			<view class="left" @click="checkCity">
				<picker :range="cityArr" range-key="city_name" :value="index" @change="bindPickerChange">
					<view class="uni-input">{{cityArr[index].city_name}} <text class="edit">更改</text> </view>
				</picker>
			</view>
		</view>
		<!-- 技师详细信息 -->
		<view class="technician_details" v-show="detailFlag">
			<!-- 遮罩层 -->
			<view class="top_seat" @click="closeMask"></view>
			<!-- 技师信息 -->
			<view class="comment">
				<view class="js_introduce">
					<view class="js_photo">
						<image :src="technicianDetail.cover" mode=""></image>
					</view>
					<view class="js_message">
						<view class="top_msg">
							<text class="technician_name">{{technicianDetail.name}}</text>
							<text class="work_year">从业时间: {{technicianDetail.work_age}}年</text>
							<view class="score">
								<image src="/static/images/collect.png" mode=""></image>
								<text>{{technicianDetail.score}}</text>
							</view>
						</view>
						<view class="main">
							{{technicianDetail.detail}}
						</view>
						<view class="bottom_msg">
							<view class="">
								<image src="/static/images/technician/security.png" mode=""></image>
								<text>实名认证</text>
							</view>
							<view class="">
								<image src="/static/images/technician/refund.png" mode=""></image>
								<text>爽约包退</text>
							</view>
							<view class="">
								<image src="/static/images/technician/certificate.png" mode=""></image>
								<text>资质证书</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 评论列表 -->
				<view class="comment_list" :class="{'no_item':commentList.length == 0}" v-if="!subscribeFlag">
					<view class="comment_list_item" v-for="(item,index) in commentList" :key="index">
						<view class="user_detail">
							<view class="user_name">
								<text>{{item.nickname}}</text>
								<uni-rate allow-half :value="technicianDetail.score" size="14" color="#999" active-color="#fd5c5b" :readonly="true" :is-fill="false" />
							</view>
							<view class="comment_time">
								{{item.create_time}}
							</view>
						</view>
						<view class="comment_text">{{item.comment_text}}</view>
						<view class="comment_label">
							
						</view>
					</view>
					<view class="no_comment" v-if="commentList.length == 0">暂无评论</view>
				</view>
				<!-- 预约项目 -->
				<view class="project_list" v-else>
					<view class="project_list_item" v-for="(item,index) in projectList" :key="index">
						<view class="image">
							<image :src="item.cover" mode=""></image>
						</view>
						<view class="project_content">
							<view class="project_detail">
								<view class="title">{{item.name}}</view>
								<view class="detail">{{item.detail}}</view>
								<view class="content">
									<view class="price">￥<text>{{item.price}}</text></view>
									<view class="time">
										<view class="time_image">
											<image src="/static/images/time.png" mode=""></image>
										</view>
										<text>{{item.duration}}分钟</text>
									</view>
								</view>
							</view>
							<view class="project_num">
								<uni-icons type="minus" size="30" style="color: #0DAB57;" @click="changeNum(index,1)"></uni-icons>
								<text style="flex: 1;text-align: center;">{{item.projecNum}}</text>
								<uni-icons type="plus-filled" size="30" style="color: #00AC50;" @click="changeNum(index,2)"></uni-icons>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="submit" v-if="subscribeFlag">
			<view class="all_price">合计：{{allPrice.toFixed(2)}}</view>
			<view class="submit_button" @click="goOrderPay">提交订单</view>
		</view>
	</view>
	<view class="collection not_list" v-else>
		<!-- #ifndef H5 -->
		<topTitle :styles="{back:true,title:'我的收藏',color:'#fff'}" />
		<!-- #endif -->
		<view class="orders_listto">
			<image src="/static/images/orders/not.png" mode=""></image>
			<view class="">
				暂无数据 ~
			</view>
		</view>
	</view>
</template>

<script>
	import topTitle from "@/components/topTitle.vue"
	export default {
		components:{
			topTitle
		},
		data() {
			return {
				technician:'',
				city:'',
				cityArr:['选择城市','长沙市','广州市','深圳市','北京市'],
				index:0,
				searchName:'',
				technicianList:[],
				technicianDetail:{},
				detailFlag:false,
				commentList:[],
				subscribeFlag:false,
				maxHeight:'',
				projectListConstant:[],
				projectList:[],
				page:1,
				limit:10,
				latLon:{},
				checkCityFlag:false,
				notList:false,
				optionId:"",
				commentPage:1,
				commentLimit:10,
			};
		},
		computed:{
			allPrice(){
				var price = 0
				this.projectList.forEach((item,index)=>{
					if(item.num != 0){
						price +=  Number(item.projecNum) * Number(item.price)
					}
				})
				return price
			}
		},
		onLoad(option) {
			
			this.getTechnicianList()
		},
		methods:{
			//头像图片预览
			preview(data){
				var arr = []
				arr.push(data)
				uni.previewImage({
					urls: arr, 
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});	
			},
			//更多照片
			preveImage(data){
				// 预览图片
				uni.previewImage({
					urls: data,
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			//收藏技师
			collection(id){
				this.$http({
					url:`/api/technician/collect/${id}`,
					method:'post',
					success:result=>{
						if(result.code == 200){
							this.getTechnicianList()
							uni.showToast({
								title:result.msg,
								icon:"none",
								duration:1500
							})
						}
					}
				})
				
			},
			getDetail(i){
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[i]))
				this.detailFlag = true
				this.getComments()
			},
			closeMask(){
				this.detailFlag = false
				this.subscribeFlag = false
				this.projectList =  JSON.parse(JSON.stringify(this.projectListConstant))
			},
			bindPickerChange(e){
				this.index = e.detail.value
				this.city = this.cityArr[this.index].city_name
				uni.setStorageSync('cityIndex',this.cityArr[this.index].city_name)
				this.getTechnicianList()
			},
			// 预约
			subscribe(i){
				this.technician = this.technicianList[i]
				this.technicianDetail = JSON.parse(JSON.stringify(this.technicianList[i]))
				if(this.optionId == ""){
					this.detailFlag = true
					this.subscribeFlag = true
					this.getProject()
				}else{
					var arr = this.projectList.filter((el)=>{
						return el.id == this.optionId
					})
					console.log(arr,'--------------arr')
					arr[0].projecNum = 1
					var products = []
					products.push({
						product_id:arr[0].id,
						num:arr[0].projecNum
					})
					let data = {
						products,
						technician_id: this.technician.id
					}
					let orderDetail = {
						data,
						technician:this.technician,
						project:arr
					}
					console.log(orderDetail,'------------------orderDetail')
					//订单详细信息缓存，等待支付页获取
					uni.setStorageSync('orderDetail',JSON.stringify(orderDetail))
					uni.navigateTo({
						url:`/pages/orders/orderPay/orderPay`
					})
				}
			},
			// 数量修改
			changeNum(index,i){
				if(i == 1){  //1代表减少
					if(this.projectList[index].projecNum > 0){
						this.projectList[index].projecNum--
					}else{
						this.projectList[index].projecNum = 0
					}
				}else{
					this.projectList[index].projecNum++
				}
			},
			goDetail(data) {
				// this.preveImage([data.cover])
				// 进入详情
				// return false;
				//暂停进入
				uni.setStorageSync('technician_id', data.id)
				uni.navigateTo({
					url: '/pages/technician/detail/detail',
				})
				
			},
			//订单支付
			goOrderPay(){
				var arr = this.projectList.filter((el)=>{
					return el.projecNum > 0
				})
				if(arr.length == 0){
					uni.showToast({
						title:'请选择项目',
						icon:'none'
					})
					return false;
				}
				let severTime = "";   //服务时间(显示)  
				let storageTime = ""; //服务时间(调接口用)
				let products = [];
				arr.forEach((item,index)=>{
					products.push({
						product_id:item.id,
						num:item.projecNum
					})
				})
				let data = {
					products,
					technician_id: this.technician.id
				}
				let orderDetail = {
					data,
					technician:this.technician,
					project:arr
				}
				//订单详细信息缓存，等待支付页获取
				uni.setStorageSync('orderDetail',JSON.stringify(orderDetail))
				uni.navigateTo({
					url:`/pages/orders/orderPay/orderPay`
				})
				
				
			},
			getProject(){
				//获取服务列表
				this.$http({
					url:`/api/product/list?page=${this.page}&limit=${this.limit}`,
					method:'',
					success:result=>{
						let data = result.data.list
						data.forEach((item,index)=>{
							item.projecNum = 0   //每条数据添加数量字段  sales：销量    projecNum：当前服务项目的数量
						})
						this.projectList =  data
					}
				})
			},
			//获取收藏列表
			getTechnicianList(){
				this.$http({
					url:`/api/technician/collect/list`,
					method:'get',
					success:result=>{
						console.log(result,'-----------------------------------------sdfsdfsd')
						this.technicianList = result.data.list
						if(this.technicianList.length == 0){
							this.notList = true
							uni.showToast({
								title:'暂无数据',
								icon:"none"
							})
						}else{
							this.notList = false
						}
					}
				})
			},
			//获取评论列表
			getComments(){
				this.$http({
					url:`/api/technician/comment/list/${this.technicianDetail.id}?page=${this.commentPage}&limit=${this.commentLimit}`,
					method:'get',
					success:result=>{
						console.log(result)
						this.commentList = result.data.list
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.collection{
		width: 100%;
		height: 100%;
		.technician_list{
			// background-color: #eee;
			flex: 1;
			// -webkit-flex:1;
			m-height: 620px;
			overflow: hidden;
			padding: 10px 12px;
			display: flex;
			// display: -webkit-flex;
			flex-direction: column;
			// -webkit-direction: column;
			.technician_list-item{
				display: flex;
				// display: -webkit-flex;
				background: #fff;
				margin-bottom: 10px;
				border-radius: 8px;
				padding: 20rpx 0;
				.left{
					display: flex;
					// display: -webkit-flex;
					flex-direction: column;
					// -webkit-direction: column;
					align-items: center;
					justify-content: space-around;
					padding-left: 5px;
					image{
						width: 82px;
						height: 82px;
						border-radius: 50%;
					}
					.type{
						padding: 2px 10px;
						background: #24D576;
						border-radius: 10px;
						color: #fff;
						z-index: 1;
						margin-top: -20rpx;
					}
				}
				.right{
					flex: 1;
					// -webkit-flex:1;
					padding: 5px 10px;
					display: flex;
					// display: -webkit-flex;
					flex-direction: column;
					// -webkit-flex-direction: column;
					view{
						display: flex;
						// display: -webkit-flex;
						justify-content: space-between;
					}
					.top{
						.name{
							color: initial;
							font-size: medium;
							font-weight: 400;
							line-height: normal;
							white-space: normal;
							align-items: center;
						}
						.work_time{
							padding: 0px 5px;
							background-image: linear-gradient(111.2deg,rgba(53,219,160,.12),rgba(53,219,160,.12) 0,rgba(24,181,103,.12) 111.69%,rgba(24,181,103,.12) 0);
							border-radius: 5px;
							color: #18b567;
							font-size: 20rpx;
						}
					} 
					.main{
						justify-content: left;
						padding: 10px 0;
						display: flex;
						justify-content: space-between;
						.score{
							margin-right: 10px;
							align-items: center;
							image{
								width: 12.5px;
								height: 12.5px;
								margin-right: 5px;
							}
							text{
								font-weight: bold;
								color: #fd5c5b;
							}
						}
						.served{
							color: #656565;
							font-weight: 400;
						}
						.distance{
							align-items: center;
							display: flex;
							margin-bottom: 6rpx;
							image{
								width: 14px;
								height: 14px;
								margin-right: 2px;
							}
							>text{
								margin-top: 5px;
								align-self: flex-end;
								color: #999;
								font-size: 22rpx;
								line-height: 14px;
								white-space: nowrap;
							}
						}
					}
					.footer{
						align-items: center;
						display: flex;
						.comment{
							text-align: center;
							align-items: center;
							display: flex;
							align-items: center;
							text{
								width: 35px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								text-align: left;
								font-size: 14px;
								margin:0 5px;
							}
							image{
								width: 20px;
								height: 20px;
							}
						}
						.appointment{
							display: flex;
							flex-direction: column;
							align-items: center;
							
							.convention{
								    align-self: flex-end;
								    margin-left: 4px;
								    padding: 4rpx 15rpx;
								    color: #fff;
								    font-size: 12px;
								    line-height: 17px;
								    white-space: nowrap;
								    background-image: linear-gradient(116.3deg,#35dba0,#35dba0 0,#18b567 111.69%,#18b567 0);
								    border-radius: 12px;
							}
						}
					}
				}
			}
		}
		.technician_details{
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 0;
			.top_seat{
				height: 150px;
				background: #000;
				opacity: 0.5;
				z-index: 2;
			}
			.comment{
				flex: 1;
				display: flex;
				flex-direction: column;
				background: #f5f5f5;
				box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
				overflow-x: hidden;
				z-index: 2;
				.js_introduce{
					height: 120px;
					margin: 13px 12px; 
					border: 1px solid #24D576;
					border-radius: 7px;
					background-color: #fff;
					box-shadow: 0 5px 8px rgba(0, 0, 0, 0);
					display: flex;
					.js_photo{
						width: 82px;
						height: 82px;
						margin: 16px 13px;
						border-radius: 50%;
						overflow: hidden;
						>image{
							width: 100%;
							height: 100%;
						}
					}
					.js_message{
						flex: 1;
						height: 100%;
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						.top_msg{
							// margin-top: 35px;
							display: flex;
							// justify-content: space-around;
							.technician_name{
								font-size: 18px;
								font-weight: bold;
								color: #2e2e2e;
								margin-right: 9px;
							}
							.work_year{
								font-size: 14px;
								font-weight: 500;
								color: #2BE17F;
								margin-right: 15px;
							}
							.score{
								display: flex;
								align-items: center;
								>image{
									width: 12.5px;
									height: 12.5px;
									margin-right: 5px;
								}
							}
						}
						.main{
							font-size: 20upx;
						}
						.bottom_msg{
							display: flex;
							align-items: center;
							justify-content: space-around;
							// margin-top:30px;
							view{
								display: flex;
								align-items: center;
								margin-right: 5px;
							}
							image{
								width: 15px;
								height: 15px;
								margin-right: 2px;
							}
						}
					}
				}
				.comment_list{
					flex: 1;
					margin: 0 12px;
					background-color: #fff;
					margin-bottom: 10px;
					padding: 18px 20px 0 19px;
					border-radius: 7px;
					overflow-y: auto;
					.comment_list_item:last-child{
						border: none;
					}
					.comment_list_item{
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #eee;
						margin-top: 10px;
						font-size: 12px;
						color: #474747;
						.user_detail{
							display: flex;
							justify-content: space-between;
							.user_name{
								display: flex;
								align-items: center;
								text{
									font-size: 18px;
									font-weight: bold;
									margin-right: 5px;
									max-width: 120px;
									text-overflow: ellipsis;
									white-space: nowrap;
									overflow: hidden;
								}
								image{
									width: 12px;
									height: 12px;
								}
							}
							.comment_time{
								font-size: 14px;
							}
						}
						.comment_text{
							padding: 5px 0; 
						}
						.comment_label{
							height: 50px;
						}
					}
					.no_comment{
						font-size: 24px;
						color: #656565;
					}
				}
				.project_list{
					flex: 1;
					margin: 0 12px;
					border-radius: 7px;
					padding-bottom: 60px;
					overflow-y: auto;
					overflow-x: hidden;
					.project_list_item{
						height: 81px;
						display: flex;
						justify-content: space-around;
						align-items: center;
						background-color: #fff;
						margin-bottom: 10px;
						border-radius: 8px;
						padding: 5px 0;
						.image{
							width: 89px;
							height: 69px;
							padding: 0 10px;
							>image{
								border-radius: 6px;
								width: 100%;
								height: 100%;
							}
						}
						.project_content{
							flex: 1;
							display: flex;
							.project_detail{
								flex: 1;
								display: flex;
								flex-direction: column;
								.title{
									font-size: 18px;
									font-weight: bold;
									color: #2e2e2e;
								}
								.detail{
									font-size: 12px;
								}
								.content{
									display: flex;
									align-items: center;
									.price{
										flex: 1;
										font-size: 14px;
										color: #fd5c5b;
										font-weight: bold;
										margin-right: 15px;
										>text{
											font-size: 20px;
										}
									}
									.time{
										width: 70px;
										display: flex;
										align-items: center;
										font-size: 14px;
										.time_image{
											width: 14px;
											height: 14px;
											>image{
												width: 100%;
												height: 100%;
												margin-bottom: 5px;
											}
										}
										>text{
											margin-left: 5px;
										}
									}
								}
							}
							.project_num{
								width: 75px;
								padding: 0 5px;
								display: flex;
								align-items: center;
								justify-content: space-around;
							}
						}
					}
				}
			}
		}
		.submit{
			width: 100%;
			height: 50px;
			padding: 5px 0;
			position: fixed;
			bottom: 0;
			background-color: #FFF;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: var(--window-bottom);
			z-index: 999;
			.all_price{
				margin-left: 25px;
				font-size: 20px;
				font-weight: bold;
				color: #fd5c5b;
			}
			.submit_button{
				margin-right: 25px;
				width: 160px;
				height: 40px;
				line-height: 40px;
				font-size: 22px;
				font-weight: bold;
				color: #fff;
				background-color: #24D576;
				border-radius: 18px;
				text-align: center;
			}
		}
		.not_detail{
			overflow-y: auto;
		}
		.not_service{
			.image{
				width: 338px;
				height: 242px;
				margin: 0 auto;
				margin-top: 100px;
				>image{
					width: 100%;
					height: 100%;
				}
			}
			.left{
				font-size: 18px;
				margin-top: 30px;
				text-align: center;
				color: #23DC92;
				>picker{
					width: 100px;
					margin: 0 auto;
					
				}
				.edit{
					font-size: 18px;
					margin-left: 10px;
					color: #000;
				}
			}
		}
		.no_item{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.not_list{
		.orders_listto{
			font-size: 14px;
			text-align: center;
			color: #9e9e9e;
			>image{
				width: 200rpx;
				height: 200rpx;
				margin: 100rpx 0 40rpx 0;
			}
		}
	}
</style>
